<template>
  <div class="container-login">
    <el-card>
      <img class="logo" src="../../assets/logo_index.png" alt="" />
      <!-- 绘制表单 -->
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
        <!-- 手机号 -->
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号">
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <el-input
            style="width:240px; margin-right:8px"
            v-model="loginForm.code"
            placeholder="请输入验证码"
          ></el-input>
          <!-- 点击发送验证码 -->
          <el-button>发送验证码</el-button>
        </el-form-item>
        <el-form-item>
          <!--用户协议  :value只能被选中 -->
          <el-checkbox :value="true"
            >我已经已阅读并同意用户协议和隐私条款</el-checkbox
          >
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button @click="login()" type="primary" style="width:100%">
            登录</el-button
          >
        </el-form-item>
        <!-- <el-form-item>
          <el-button @click="add()" type="primary" style="width:100%">
            注册</el-button
          >
        </el-form-item> -->
      </el-form>
    </el-card>
  </div>
</template>

<script>
//  导入token
import auth from "@/utils/auth";
export default {
  // 当时路由来渲染组件，会使用name指定的组件名称，没指定默认是文件的名称
  // Vue.component() components选项注册组件，组件的名字是自己定义和name无关。
  name: "login-page",
  data() {
    // 声明自定义校验函数
    const checkMobile = (rule, value, callback) => {
      // 进行校验，校验逻辑： 1开头 + 第二位数字（3-9）+9位数字结尾
      if (!/^1[3-9]\d{9}$/.test(value))
        return callback(new Error("手机号不正确"));
      callback();
    };
    return {
      loginForm: {
        mobile: "",
        code: ""
      },
      loginRules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "bulr" },
          // 自定义校验
          { validator: checkMobile, trigger: "blur" }
        ],
        code: [
          { required: "true", message: "请输入验证码", trigger: "bulr" },
          { len: 6, message: "请输入6个字符", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    // add() {
    //   this.$http
    //     .post("http://ttapi.research.itcast.cn/app/v1_0/authorizations", {
    //       mobile: "13785979548",
    //       code: "246810"
    //     })
    //     .then(res => {
    //       console.log(res);
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    // 登录
    // login() {
    //   // 1. 对整体表单进行校验validate
    //   this.$refs.loginForm.validate(async valid => {
    //     if (valid) {
    //       // 2. 校验成功后进行登录
    //       // this.$http
    //       //   .post("/authorizations", this.loginForm)
    //       //   .then(res => {
    //       //     // //  成功res
    //       //     // // 1、保存信息 res.data  响应主体 res.data.data 用户信息
    //       //     auth.setUser(res.data.data);
    //       //     console.log(res.data.data);
    //       //     // auth.setUser(res.data.data);
    //       //     // // 2、跳转首页
    //       //     this.$router.push("/");
    //       //   })
    //       //   .catch(() => {
    //       //     this.$message.error("你输入的手机号或者验证码有误！！");
    //       //   });
    //     }
    //   });
    // }
    // 登录
    // login() {
    //   // 1. 对整体表单进行校验validate
    //   this.$refs.loginForm.validate(async valid => {
    //     if (valid) {
    login() {
      //  整体表单校验
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          try {
            const res = await this.$http.post(
              "/authorizations",
              this.loginForm
            );
            //  登录陈成功
            auth.setUser(res.data.data);
            // 跳转首页
            this.$router.push("/");
          } catch (e) {
            this.$message.error("手机或者验证码错误");
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.container-login {
  width: 100%;
  height: 100%;

  background: url(../../assets/login_bg.jpg) no-repeat center/ cover;
  position: absolute;
  left: 0;
  top: 0;
  .el-card {
    width: 400px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .logo {
    width: 200px;
    display: block;
    margin: 0 auto 20px;
  }
}
</style>
